<template>
  <div ref="container"></div>
</template>

<script>
import { Line } from '@antv/g2plot';

import { onMounted, ref } from 'vue';
export default {
  name: 'about',
  setup() {
    //  4.获取dom元素
    const container = ref(null);
    let line = null;
    let initChart = () => {
      line = new Line(container.value, {
        data: [
          { year: '1991', value: 3 },
          { year: '1992', value: 4 },
          { year: '1993', value: 3.5 },
          { year: '1994', value: 5 },
          { year: '1995', value: 4.9 },
          { year: '1996', value: 6 },
          { year: '1997', value: 7 },
          { year: '1998', value: 9 },
          { year: '1999', value: 13 }
        ],
        xField: 'year',
        yField: 'value',
        point: {
          size: 5,
          shape: 'diamond',
          style: {
            stroke: '#FE740C',
            lineWidth: 2,
            fillOpacity: 0.6
          }
        },
        // 添加label
        label: {
          fill: '#FE740C'
        }
      });

      // plot 添加点击事件,整个图表区域
      line.on('plot:click', (...args) => {
        console.log(...args);
      });
      line.off('element:click');
      // element 添加点击事件， element 代表图形元素，关于图形元素，请查看：https://g2.antv.vision/zh/docs/manual/concepts/element
      line.on('element:click', (...args) => {
        debugger;
        console.log(...args, 1111111111);
      });

      // 图例添加点击事件
      line.on('legend-item:click', (...args) => {
        console.log(...args);
      });

      // 图例名称添加点击事件
      line.on('legend-item-name:click', (...args) => {
        console.log(...args);
      });

      // 给 tooltip 添加点击事件
      line.on('tooltip:show', (...args) => {
        console.log(...args);
      });

      line.on('tooltip:hide', (...args) => {
        console.log(...args);
      });

      line.on('tooltip:change', (...args) => {
        console.log(...args);
      });

      // label 添加点击事件
      line.on('label:click', (...args) => {
        console.log(...args);
      });

      // mask 添加点击事件
      line.on('mask:click', (...args) => {
        console.log(...args);
      });

      // axis-label 添加点击事件
      line.on('axis-label:click', (...args) => {
        console.log(...args, 'axis-label');
      });

      // 给 annotation 添加点击事件
      line.on('annotation:click', (...args) => {
        console.log(...args);
      });
      line.render();
    };
    onMounted(initChart);
    return {
      container
    };
  }
};
</script>

<style scoped></style>
